<template>
  <div class="courses">
    <v-list class="class_list">
        <v-data-table
          :headers="head"
          :items="items"
          :items-per-page="10"
          class="elevation-1"
          @click:row="toContain"
        >
          <template v-slot:item.gender="{ item }">
            {{item.gender? "male" : "female" }}
          </template>
          <template v-slot:item.actions="{ item }">
            <v-icon
              small
              class="mr-2"
              @click="handleEdit(item)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
              small
              @click="deleteItem(item)"
            >
              mdi-delete
            </v-icon>
          </template>
      </v-data-table>
    </v-list>
  </div>
</template>
<script>
export default {
  data: () => ({
    head: [
      { text: 'id', value: 'id' },
      { text: 'Name', value: 'name' },
      { text: 'Gender', value: 'gender' },
      { text: 'Phone', value: 'phone' },
      { text: 'Role', value: 'role' },
      { text: 'Actions', value: 'actions' }
    ],
    items: [
      {
        id: 1,
        name: 'root',
        gender: 1,
        phone: '12345',
        role: 'admin',
      }
    ]
  }),
  mounted() {
  },
  methods: {
    
  },
};
</script>
<style scoped>
.courses {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.class_list{
background-color: #F5F5F5;
width: 100%;
padding-top: 8vh;
padding-left: 2vw;
padding-right: 2vw;
}
.classes{
  border: 1px solid #E0E0E0;
  padding-left: 2vw ;
  margin-right: 15vw;
}
</style>
